<template>
    <div class="home-container">
        <div class="file-templates">
            <!-- <h2>文档模板</h2> -->
            <!-- <div class="file-element">
                <div class="file-text">
                    <p></p>
                    <div>
                        <i class="iconfont icon-gerenzhongxin"></i>
                    </div>
                    <div>
                        <i class="iconfont icon-calendar"></i>
                    </div>
                </div>
                <div class="template-operation">
                    <i title="Move" class="iconfont fz18 icon-yidongwenjianjia"></i>
                    <i title="Edit" class="iconfont fz18 icon-edit"></i>
                    <i title="Clone" class="iconfont fz18 icon-copy"></i>
                    <i title="Archive" class="iconfont fz18 icon-delete"></i>
                </div>
            </div> -->
        </div>
        <div @click="fileUpload" @drop="handleFileDrop" @dragover.prevent @dragenter.prevent class="home">
            <input multiple type="file" ref="fileDiv" @change="chooseFile" v-show="fileIpt">
            <div class="tac">
                <i class="iconfont icon-shangchuan drag-upload"></i>
                <p>上传新文件</p>
                <p>点击或者拖拽上传文件</p>
            </div>
        </div>
        <p class="tdu">View Archived</p>
    </div>
</template>

<script setup>
import '../../assets/fonts/font_4458179_epq5gp4j2mo/iconfont.js'
import '../../assets/fonts/font_4458179_epq5gp4j2mo/iconfont.css'
import { useFileStore } from '../../store/File.js'
import { ref } from 'vue';
import router from '../../router/index.js';

const fileDiv = ref(null)
const fileIpt = ref(false)

const fileStore = useFileStore()
const fileUpload = () => {
    fileDiv.value.click()
}
const chooseFile = (e) => {
    // console.log(e.target.files, 'files');
    // console.log(e.target.files.length);
    if (e.target.files.length !== 0) {
        fileStore.setUserFile(e.target.files)
        router.push('/preview')
    }
}
const handleFileDrop = (e) => {
    e.preventDefault()
    // console.log(e.dataTransfer.files);
    if (e.dataTransfer.files.length !== 0) {
        fileStore.setUserFile(e.dataTransfer.files)
        router.push('/preview')

    }
}
</script>

<style lang="scss" scoped>
.home-container {
    width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 50px;
    align-items: flex-start;
}

.home {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 90%;
    height: 200px;
    border: 1px dashed #ccc;
    border-radius: 10px;
    margin-bottom: 20px;
}

.drag-upload {
    font-size: 40px;
}

.file-element {
    display: flex;
    flex-direction: row;
    padding: 10px 20px 0 10px;
    width: 360px;
    height: 140px;
    background-color: #EFEAE6;
    border-radius: 8px;
}

.file-templates {
    width: 90%;
    padding: 20px 0;
}

.file-text {
    flex: 1;
}

.template-operation {
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 10px;
}

.fz18 {
    width: 22px;
    height: 22px;
    font-size: 18px;
    text-align: center;
    line-height: 20px;
    color: #000;
    cursor: pointer;
    border-radius: 50% !important;
}

.fz18:hover {
    background-color: #000;
    color: #fff;
}

.tdu {
    text-decoration: underline;
    cursor: pointer;
}

.tac {
    text-align: center;
}

p {
    white-space: pre;
}
</style>